<template>
	<view class="content">
		<view class="header"@click='musicBtn'>
			<image class="logo" src="../../static/logo.png"></image>
		</view>
		<view class="gameView">
			<view @tap="go2(game.url)" v-for="(game,i) in gamesList" :key="'game-'+i">
				<image :src="game.image || '../../static/logo.png'" mode="widthFix"></image>{{game.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gamesList:[
					{
						image:'../../static/2048.png',
						url:'../letter/letter',
						name:'2048'
					},{
						image:'../../static/mouse.png',
						url:'../mouse/mouse',
						name:'打地鼠'
					},
					
					{
						image: '../../static/guess.png',
						url:'../guess/guess',
						name:'猜一猜'
					},
					
					
				]
			}
		},
		onLoad() {
			this.$music.playBgm({mute:false})
		},
		methods: {
			musicBtn() {
			                this.muteBgMusic = !this.muteBgMusic
			                console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');      
			                if (this.muteBgMusic) {
			                    // 开启静音
			                    this.$music.playBgm({mute:true})
			                } else {
			                    // 关闭 静音
			                    this.$music.playBgm({mute:false})
			                }
			            },
			
			go2(page){
				uni.navigateTo({
					url:page
				})
			},
		}
	}
</script>

<style>
	
	page {
		background: #FFFFF3;
		/* background: linear-gradient(61deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); */
	}
	
	.logo {
		height: 130rpx;
		width: 130rpx;
		/* border: #4CD964 solid; */
	}
	
	.header {
		display: flex;
		justify-content: center;
		margin: 50rpx;
		/* border: #555555 solid; */
	}
	
	.gameView{
		width: 40%;
		
		padding-left: 32%;
		display: flex;
		flex-direction:row;
		align-items: center;
		flex-wrap: wrap;
		
	}
	
	.gameView view{
		box-shadow: 0 2px 5px #333333;
		width: 300upx;
		height:300upx;
		padding: 1% 1.5%;
		border-radius: 10px;
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 10% 10px;
		text-align: center;
		font-size: 38upx;
		color: #566270;background-color: #d0d3d0;
	}
	
	.gameView view:active{
		background-color: #d0d3d0;
	}
	
	.gameView view image{
		width: 90%;
	}
</style>
